import api from "../../requests/index";
import * as echarts from '../../components/ec-canvas/echarts';
const app = getApp();

const initChart = function(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  const option = {
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
      data: ['数量', '激活', '佣金'],
      top: '15',
      right: '15',
      backgroundColor: 'white',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '数量',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: '激活',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: '佣金',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
    }]
  };
  chart.setOption(option);
  return chart;
}
/* data数据 */
const wxData = {
  ec: {
    onInit: initChart
  },
  columns: {},
  show: false,
  isHiddenChart: false,
  params: {
    year: 2019,
    month: 4,
  },
  type: '',
}

/* 生命周期函数 */
const pageLifeCycle = {

  onLoad() {
    this.init();
  },
  onReady() {

  },
  onShow() {

  },
  onHide() {

  },
  onUnload() {

  },
};

/* 事件函数 */
const bindEvent = {
  onClickPopup(e) {
    const type = e.currentTarget.dataset.type;
    this.setData({
      isHiddenChart: true,
      type,
    }, () => {
      this.setData({
        show: true,
      });
    });
  },
  onCancel() {
    this.setData({
      show: false,
    }, () => {
      setTimeout(() => {
        this.setData({
          isHiddenChart: false,
        });
      }, 300);
    });
  },
  onConfirm(e) {
    const type = e.currentTarget.dataset.type;
    const value = e.detail.value;
    this.setData({
      [`params.${type}`]: value
    });
    this.onCancel();
  }
};

/* 通用方法 */
const customedEvent = {
  init() {
    this.generateOpts();
  },
  generateOpts() {
    const columns = {
      year: (new Array(20)).fill((new Date()).getFullYear()).map((item, index) => item - index),
      month: (new Array(12)).fill(1).map((item, index) => item + index),
    };
    this.setData({
      columns,
    });
  }

};

Page({
  data: wxData,
  ...pageLifeCycle,
  ...bindEvent,
  ...customedEvent,
});
